import React from 'react';
import { useNavigate } from 'react-router-dom';
import GlitchBackgroundWrapper from '../../components/layout/GlitchBackgroundWrapper';
import { motion } from 'framer-motion';

const LandingPage: React.FC = () => {
  const navigate = useNavigate();
  
  return (
    <GlitchBackgroundWrapper>
      {/* 毛玻璃导航栏 */}
      <motion.nav 
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          zIndex: 3,
          padding: '1rem 2rem',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          backgroundColor: 'rgba(0, 0, 0, 0.2)',
          backdropFilter: 'blur(10px)',
          borderBottom: '1px solid rgba(255, 255, 255, 0.1)'
        }}
        initial={{ y: -50, opacity: 0 }}
        animate={{ y: 0, opacity: 1 }}
        transition={{ duration: 0.5 }}
      >
        <motion.div 
          style={{
            display: 'flex',
            alignItems: 'center',
            color: 'white',
            fontWeight: 'bold',
            fontSize: '1.2rem'
          }}
          whileHover={{ scale: 1.05 }}
        >
          <motion.span 
            style={{ marginRight: '0.5rem' }}
            animate={{ 
              rotate: [0, 10, -10, 0],
              transition: { 
                duration: 2,
                repeat: Infinity,
                repeatType: "reverse"
              }
            }}
          >
            ⚡
          </motion.span>
          React Bits
        </motion.div>
        <div style={{
          display: 'flex',
          gap: '2rem'
        }}>
          {['Home', 'Docs'].map((item, index) => (
            <motion.a 
              key={item} 
              href="#" 
              style={{
                color: 'white',
                textDecoration: 'none',
                fontWeight: '500',
                transition: 'all 0.3s ease'
              }}
              onMouseEnter={(e) => (e.target as HTMLElement).style.color = '#61dca3'}
              onMouseLeave={(e) => (e.target as HTMLElement).style.color = 'white'}
              whileHover={{ y: -2, color: '#61dca3' }}
              initial={{ opacity: 0, y: -20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.3, delay: 0.1 * index }}
            >
              {item}
            </motion.a>
          ))}
        </div>
      </motion.nav>
      
      {/* 毛玻璃内容区域 */}
      <div style={{ 
        position: 'relative', 
        zIndex: 2,
        width: '100%',
        height: '100%',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        padding: '20px'
      }}>
        {/* 毛玻璃效果标题 */}
        <motion.div 
          style={{
            marginBottom: '3rem',
            textAlign: 'center',
            maxWidth: '800px'
          }}
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.3 }}
        >
          <h1 style={{
            fontSize: '2.5rem',
            fontWeight: 'bold',
            marginBottom: '1rem',
            background: 'linear-gradient(90deg, #ffffff, #61dca3)',
            WebkitBackgroundClip: 'text',
            WebkitTextFillColor: 'transparent',
            textShadow: '0 0 10px rgba(97, 220, 163, 0.3)'
          }}>
            Am I finally a real hacker now, mom?
          </h1>
        </motion.div>
        
        {/* 毛玻璃效果按钮 */}
        <motion.div 
          style={{
            display: 'flex',
            gap: '1.5rem',
            justifyContent: 'center'
          }}
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.5 }}
        >
          <motion.button 
            style={{
              padding: '12px 24px',
              fontSize: '1rem',
              fontWeight: 'bold',
              color: 'black',
              backgroundColor: 'rgba(255, 255, 255, 0.8)',
              backdropFilter: 'blur(10px)',
              border: 'none',
              borderRadius: '50px',
              cursor: 'pointer',
              transition: 'all 0.3s ease',
              boxShadow: '0 4px 15px rgba(97, 220, 163, 0.3)'
            }}
            whileHover={{ 
              backgroundColor: 'rgba(255, 255, 255, 1)',
              boxShadow: '0 4px 20px rgba(97, 220, 163, 0.5)',
              y: -2
            }}
            whileTap={{ scale: 0.95 }}
            onClick={() => navigate('/login')}
          >
            Get Started
          </motion.button>
          
          <motion.button 
            style={{
              padding: '12px 24px',
              fontSize: '1rem',
              fontWeight: 'bold',
              color: 'white',
              backgroundColor: 'rgba(0, 0, 0, 0.4)',
              backdropFilter: 'blur(10px)',
              border: '1px solid rgba(255, 255, 255, 0.2)',
              borderRadius: '50px',
              cursor: 'pointer',
              transition: 'all 0.3s ease'
            }}
            whileHover={{ 
              backgroundColor: 'rgba(0, 0, 0, 0.6)',
              border: '1px solid rgba(255, 255, 255, 0.4)',
              y: -2
            }}
            whileTap={{ scale: 0.95 }}
            onClick={() => alert('Learn More clicked!')}
          >
            Learn More
          </motion.button>
        </motion.div>
        
        {/* 毛玻璃效果的小标签 */}
        <motion.div 
          style={{
            position: 'absolute',
            top: '20%',
            left: '50%',
            transform: 'translateX(-50%)',
            padding: '8px 16px',
            backgroundColor: 'rgba(0, 0, 0, 0.3)',
            backdropFilter: 'blur(5px)',
            border: '1px solid rgba(255, 255, 255, 0.1)',
            borderRadius: '50px',
            color: '#61dca3',
            fontSize: '0.8rem',
            fontWeight: 'bold',
            letterSpacing: '1px'
          }}
          initial={{ opacity: 0, scale: 0.8 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ 
            duration: 0.5,
            delay: 0.7,
            type: "spring",
            stiffness: 300,
            damping: 15
          }}
          whileHover={{ 
            scale: 1.1,
            rotate: [0, 5, -5, 0],
            transition: { duration: 0.5 }
          }}
        >
          New Background
        </motion.div>
      </div>
    </GlitchBackgroundWrapper>
  );
};

export default LandingPage;